import React, { useState } from 'react';

interface TabsProps {
  defaultValue?: string;
  value?: string;
  onValueChange?: (value: string) => void;
  children: React.ReactNode;
  className?: string;
}

const Tabs: React.FC<TabsProps> = ({ defaultValue, value: valueProp, onValueChange, children, className = '' }) => {
  const [localValue, setLocalValue] = useState(defaultValue || '');
  const currentValue = valueProp !== undefined ? valueProp : localValue;
  
  const handleValueChange = (newValue: string) => {
    if (valueProp === undefined) {
      setLocalValue(newValue);
    }
    onValueChange?.(newValue);
  };

  // 遍历子元素，提取TabsTrigger和TabsContent
  const renderChildren = () => {
    const triggers: React.ReactNode[] = [];
    const contents: React.ReactNode[] = [];
    
    React.Children.forEach(children, (child) => {
      if (React.isValidElement(child)) {
        if (child.type === TabsTrigger) {
          triggers.push(
            React.cloneElement(child, {
              onClick: () => handleValueChange(child.props.value),
              isActive: child.props.value === currentValue,
            })
          );
        } else if (child.type === TabsContent) {
          contents.push(
            React.cloneElement(child, {
              isActive: child.props.value === currentValue,
            })
          );
        } else {
          contents.push(child);
        }
      }
    });
    
    return (
      <>
        <div className="flex mb-4">
          {triggers}
        </div>
        {contents}
      </>
    );
  };

  return <div className={className}>{renderChildren()}</div>;
};

interface TabsListProps {
  children: React.ReactNode;
  className?: string;
}

const TabsList: React.FC<TabsListProps> = ({ children, className = '' }) => {
  const baseClasses = 'flex rounded-md p-1 bg-slate-100 dark:bg-slate-800';
  const classes = `${baseClasses} ${className}`;
  
  return <div className={classes}>{children}</div>;
};

interface TabsTriggerProps {
  value: string;
  children: React.ReactNode;
  isActive?: boolean;
  onClick?: () => void;
  className?: string;
}

const TabsTrigger: React.FC<TabsTriggerProps> = ({ value, children, isActive = false, onClick, className = '' }) => {
  const baseClasses = 'px-3 py-1 text-sm font-medium rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2';
  const activeClasses = isActive 
    ? 'bg-white dark:bg-slate-700 text-primary dark:text-white' 
    : 'text-slate-700 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700/50';
  const classes = `${baseClasses} ${activeClasses} ${className}`;
  
  return (
    <button type="button" className={classes} onClick={onClick}>
      {children}
    </button>
  );
};

interface TabsContentProps {
  value: string;
  children: React.ReactNode;
  isActive?: boolean;
  className?: string;
}

const TabsContent: React.FC<TabsContentProps> = ({ value, children, isActive = false, className = '' }) => {
  if (!isActive) return null;
  
  const baseClasses = 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2';
  const classes = `${baseClasses} ${className}`;
  
  return <div className={classes}>{children}</div>;
};

export { Tabs, TabsList, TabsTrigger, TabsContent };